<template>
    <view class="content">
        <topHeader :title="'订单列表'" :color="'#4a92ff'" :back="true"></topHeader>
        <view class="urgency">
            <view class="item_indent" v-for="(item, index) in indentList" :key="index" @click="indentDetalFn(item.id)">
                <text class="one">订单编号</text>
                <view class="tow">
                    <view style="font-weight: 600">{{ item.order_no }}</view>
                    <view class="cen">
                        <text class="text" :style="{ backgroundColor: item.backgroundColor }">{{ item.status_text }}</text>
                    </view>
                    <uni-icons custom-prefix="iconfont" type="icon-youjiantou" size="15"></uni-icons>
                </view>
                <view class="three">
                    <text class="item">
                        买家姓名：
                        <text>{{ item.name }}</text>
                    </text>
                    <text class="item">
                        售后类型：
                        <text>{{ item.question_type_text }}</text>
                    </text>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { indentTypeGet } from '@/pages/request/loginApi.js';
import topHeader from '@/pages/components/topHeader.vue';
import tarbar from '@/pages/components/tarbar.vue';
import search from '@/pages/components/search.vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
onLoad((option) => {
    // indentGetFn({ keywords: option.value });
    indentListFn({ keywords: option.value });
});
// async function indentGetFn(data) {
//     const res = await indentTypeGet(data);
//     indentList.value = res.data;
// }
const currentTab = ref(); // 当前选中的 tab
const fn = () => {
    const res = getCurrentPages();
    currentTab.value = res[res.length - 1].$page.fullPath;
};
const indentList = ref();
const backgroundColor = ref('#1FBB6A');
async function indentListFn(status) {
    const res = await indentTypeGet(status);
    indentList.value = res.data;
    indentList.value.forEach((item, index) => {
        // console.log(item.status_text);
        if (item.status_text == '纠纷') {
            indentList.value[index].backgroundColor = '#E9552D';
        } else if (item.status_text == '已完成') {
            indentList.value[index].backgroundColor = '#1FBB6A';
        } else if (item.status_text == '退款审核') {
            indentList.value[index].backgroundColor = '#9568FE';
        } else if (item.status_text == '处理中') {
            indentList.value[index].backgroundColor = '#5081C2';
        } else if (item.status_text == '待处理') {
            indentList.value[index].backgroundColor = '#FFC556';
        } else if (item.status_text == '紧急') {
            indentList.value[index].backgroundColor = '#DA1C1C';
        }
    });
}
//
function indentDetalFn(id) {
    uni.navigateTo({
        url: `/pages/indentVIew/indentVIew?id=${id}`
    });
}
</script>

<style scoped lang="scss">
@import 'uview-plus/index.scss';
.content {
    min-height: 100vh;
    background-color: #e5f4ff;
    .title_cl {
        width: 750rpx;
        margin: 0 auto;
    }
    ::v-deep .u-scroll-list {
        background-color: #fff;
        padding: 0;
    }
    .input_box {
        width: 700rpx;
        padding-bottom: 30rpx;
        margin: 0 25rpx;
        display: flex;
        align-items: center;
        .input {
            flex: 1;
            height: 80rpx;
            margin: 60rpx 0;
            background-color: #fff;
            border-radius: 43rpx;
            border: #e9e9e9 solid 1rpx;
        }
        ::v-deep .is-input-border {
            border-radius: 40rpx;
        }
        .search {
            width: 120rpx;
            height: 68rpx;
            margin: 0rpx 16rpx;
            background-color: rgba(62, 134, 227, 1);
            font-size: 36rpx;
            text-align: center;
            line-height: 64rpx;
            border-radius: 12rpx;
        }
    }
    .title {
        padding: 20rpx 6rpx;
        font-size: 32rpx;
        height: 80rpx;
        flex-shrink: 0;
        text-align: center;
        margin: 0 25rpx;
    }
    .actTitle {
        color: #049de0;
        &::after {
            display: block;
            content: '';
            background-color: #049de0;
            width: 20%;
            height: 8rpx;
            margin: 0 auto;
            margin-top: 6rpx;
            border-radius: 4rpx;
        }
    }
    .urgency {
        width: 700rpx;
        margin: 0 26rpx;
        padding: 10rpx;
        padding-bottom: 150rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        .item_indent {
            width: 700rpx;
            height: 194rpx;
            border-radius: 10rpx;
            display: flex;
            flex-direction: column;
            align-items: self-start;
            font-size: 24rpx;
            background-color: #fff;
            border-radius: 12rpx;
            padding: 20rpx;
            margin-bottom: 20rpx;
            .one {
                color: #049de0;
                padding: 6rpx 12rpx;
                border-radius: 6rpx;
                background-color: rgba(4, 157, 224, 0.2);
            }
            .tow {
                width: 100%;
                margin: 12rpx 0;
                font-size: 32rpx;
                display: flex;
                justify-content: space-between;

                .cen {
                    flex: 1;
                    text-align: right;
                    color: #fff;

                    .text {
                        background-color: red;
                        padding: 6rpx 20rpx;
                        border-radius: 12rpx;
                        font-size: 24rpx;
                    }
                }
                .jiant {
                    width: 40rpx;
                    height: 40rpx;
                }
            }
            .three {
                width: 100%;
                padding: 10rpx;
                display: flex;
                justify-content: space-between;
                background-color: rgba(191, 236, 251, 0.3);
                border-radius: 6rpx;
                .item {
                    color: #66899e;
                    text {
                        color: #000;
                    }
                }
            }
        }
    }
}
</style>
